@import './_vars';

/*
  颜色
*/
// 主体颜色
.#{$--custom-name} {
  &-color {
    &-white {
      color: $--color-white;
    }
    &-primary {
      color: $--color-primary;
    }
    &-dark {
      color: $--color-dark;
    }
  }
}
// 背景颜色
.#{$--custom-name} {
  &-bg {
    &-white {
      background-color: $--bg-white;
    }
  }
}

/*
  字体
*/
.#{$--custom-name} {
  &-font {
    // 字体大小
    @for $idx from 5 through 20 {
      &-#{$idx * 2} {
        font-size: #{$idx * 2}px;
      }
    }
    // 字体比重
    @for $idx from 2 through 8 {
      &-#{$idx * 100} {
        font-weight: $idx * 100;
      }
    }
    // 位置
    &-center {
      text-align: center;
    }
    &-right {
      text-align: right;
    }
  }
}

// 相对宽高
.#{$--custom-name} {
  &-w {
    &-100 {
      width: 100%;
    }
  }
  &-h {
    &-100 {
      height: 100%;
    }
  }
}

// 间隔与间距
.#{$--custom-name} {
  @for $idx from 1 through 16 {
    &-p {
      &-#{$idx * 4} {
        padding: #{$idx * 4}px;
      }
      &x-#{$idx * 4} {
        padding-left: #{$idx * 4}px;
        padding-right: #{$idx * 4}px;
      }
      &y-#{$idx * 4} {
        padding-top: #{$idx * 4}px;
        padding-bottom: #{$idx * 4}px;
      }
      &t-#{$idx * 4} {
        padding-top: #{$idx * 4}px;
      }
      &b-#{$idx * 4} {
        padding-bottom: #{$idx * 4}px;
      }
      &l-#{$idx * 4} {
        padding-left: #{$idx * 4}px;
      }
      &r-#{$idx * 4} {
        padding-right: #{$idx * 4}px;
      }
    }
    &-m {
      &-#{$idx * 4} {
        margin: #{$idx * 4}px;
      }
      &x-#{$idx * 4} {
        margin-left: #{$idx * 4}px;
        margin-right: #{$idx * 4}px;
      }
      &y-#{$idx * 4} {
        margin-top: #{$idx * 4}px;
        margin-bottom: #{$idx * 4}px;
      }
      &t-#{$idx * 4} {
        margin-top: #{$idx * 4}px;
      }
      &b-#{$idx * 4} {
        margin-bottom: #{$idx * 4}px;
      }
      &l-#{$idx * 4} {
        margin-left: #{$idx * 4}px;
      }
      &r-#{$idx * 4} {
        margin-right: #{$idx * 4}px;
      }
    }
  }
}

// flex布局
.#{$--custom-name} {
  &-flex {
    display: flex;
    align-items: center;
    &-wrap {
      flex-wrap: wrap;
    }
    &-nowrap {
      flex-wrap: nowrap;
    }
    &-row {
      flex-direction: row;
    }
    &-col {
      flex-direction: column;
    }
    @for $idx from 1 through 4 {
      &-#{$idx} {
        flex: $idx;
      }
    }
  }
  &-row {
    &-left {
      justify-content: flex-start;
    }
    &-center {
      justify-content: center;
    }
    &-right {
      justify-content: flex-end;
    }
    &-between {
      justify-content: space-between;
    }
    &-around {
      justify-content: space-around;
    }
  }
  &-col {
    &-top {
      align-items: flex-start;
    }
    &-center {
      align-items: center;
    }
    &-bottom {
      align-items: flex-end;
    }
    &-full {
      align-items: stretch;
    }
  }
}
// 垂直全占位布局
.#{$--custom-name} {
  &-box {
    display: flex;
    align-items: center;
    &-center {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &-between {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &-frow {
      @extend .rd-w-100;
      display: flex;
      align-items: stretch;
    }
    &-fcol {
      @extend .rd-h-100;
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
  }
}

// 边框域
.#{$--custom-name} {
  &-area {
    &-none {
      overflow: hidden;
    }
  }
}
.#{$--custom-name} {
  &-area {
    &-x {
      @extend .#{$--custom-name}-area-none;
      overflow-x: scroll;
    }
    &-y {
      @extend .#{$--custom-name}-area-none;
      overflow-y: scroll;
    }
  }
}

// 内容
.#{$--custom-name} {
  &-content {
    @extend .rd-flex-1;
    @extend .rd-box-fcol;
    @extend .rd-bg-white;
    @extend .rd-p-12;
    border-radius: 10px;
    box-shadow: 0 0 13px 1px rgba(149, 149, 149, 0.17);
    position: relative;
  }
}
